<template>
  <div class="app-container">
    <template v-if="!chatStore.connected && !chatStore.connecting">
      <div class="login-container">
        <el-card class="login-card">
          <div class="login-header">医疗咨询聊天系统</div>

          <el-radio-group v-model="role" class="role-selector">
            <el-radio-button :value="'user'">用户</el-radio-button>
            <el-radio-button :value="'doctor'">医生</el-radio-button>
          </el-radio-group>

          <el-input v-model="userName" :placeholder="role === 'doctor' ? '请输入医生名称(以consultant_开头)' : '请输入用户名'"
            class="name-input" clearable />

          <el-button type="primary" class="connect-button"
            :disabled="!userName || (role === 'doctor' && !userName.startsWith('consultant_'))" @click="connect">
            连接
          </el-button>
        </el-card>
      </div>
    </template>

    <template v-else-if="chatStore.connected">
      <template v-if="chatStore.currentUser.role === 'doctor'">
        <DoctorInterface />
      </template>
      <template v-else>
        <UserInterface />
      </template>
    </template>

    <template v-else>
      <div class="connecting">
        <el-loading-spinner />
        <div class="loading-text">连接中...</div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useChatStore } from './stores/chatStore';
import DoctorInterface from './components/DoctorInterface.vue';
import UserInterface from './components/UserInterface.vue';

const chatStore = useChatStore();
const role = ref('user');
const userName = ref('');

const connect = () => {
  const userId = role.value === 'doctor' ? userName.value : userName.value;
  chatStore.connect(role.value, userId, userName.value);
};
</script>

<style scoped>
.app-container {
  height: 94vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.login-container {
  width: 400px;
}

.login-card {
  padding: 30px;
}

.login-header {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #1890ff;
}

.role-selector {
  margin-bottom: 20px;
}

.name-input {
  margin-bottom: 20px;
}

.connect-button {
  width: 100%;
}

.connecting {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: 16px;
  color: #666;
}
</style>